<template>
  <div class="news-info">
    <h3 class="title">{{ photoInfo.title }}</h3>
    <div class="subtitle">
      <span>发表时间：{{ photoInfo.add_time }}</span>
      <span>点击次数：{{ photoInfo.click }}</span>
    </div>
    <hr />

    <!-- 缩略图 -->
    <div class="pic">
      <vue-preview :slides="list" @close="handleClose">
      </vue-preview>
    </div>
  


    <div class="content" v-html="photoInfo.zhaiyao">
    </div>
    <Comment :prent_id="'photo_'+$route.params.id"/>
  </div>
  
</template>

<script>
import Comment from '../../components/comment.vue'
export default {
  data(){
    return {
      photoInfo:{},
      list: [

        ]
    }
  },
  components:{
    Comment
  },
  created(){
    this.getPhotoInfo()
    this.getPic()
  },
  methods:{
    async getPhotoInfo(){
      let data = await this.ajax.get(`/api/photo/photoInfo/${this.$route.params.id}`)
      this.photoInfo=data.data
    },
    async getPic(){
      let data = await this.ajax.get(`/api/pic/photo_${this.$route.params.id}`)
      data.data.forEach(item=>{
        let obj={}
        obj.src=item.img_url
        obj.msrc=item.img_url
        obj.w=600
        obj.h=400
        this.list.push(obj)
      })
    },
    handleClose(){
      alert(111)
    }
  }
}
</script>


<style lang="less" scoped>
.news-info{
  padding: 0 10px;
  .title{
    font-size:15px;
    color: blue;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle{
    display: flex;
    justify-content: space-between;
    color:gray;
    span{
      font-size: 12px;
    }
  }
}

</style>